<meta charset="UTF-8">
<script src="jquery-3.2.1.js"></script>
<style>
    *{
        margin:0px;
        padding:0px;
    }
    img{
        vertical-align: bottom;
    }
    .lunbo{
        margin:0 auto;
        width:730px;
        position:relative;
    }
    .imgnav{
        position:absolute;
        bottom:10px;
        width:730px;
        text-align:center;
    }
    .imgnav span{
            display:inline-block;
            width:25px;
            height:25px;
            border-radius:50%;
            color:white;
            background:#333;
        line-height:25px;
    }
    .imgnav .imgnavhover{
        background:orange;
    }
    .leftnav{
        position:absolute;
        left:10px;
        top:200px;
        width:50px;
        height:50px;
        line-height:50px;
        text-align:center;
        background:rgba(0,0,0,0.2);
        color:white;
        font-size:24px;
        display:none;
        cursor:pointer;
    }
    .rightnav{
        position:absolute;
        right:10px;
        top:200px;
        width:50px;
        height:50px;
        line-height:50px;
        text-align:center;
        background:rgba(0,0,0,0.2);
        color:white;
        font-size:24px;
        display:none;
        cursor:pointer;
    }
</style>
<div class="lunbo">
    <img src="adver01.jpg" />
    <div class="imgnav">
        <span class="imgnavhover">1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
    <div class="leftnav" title="上一张"> < </div>
    <div class="rightnav" title="下一张"> > </div>
</div>

<script>
    $(start);

    var i = 1;
    var timer;

    function start(){
        $(".lunbo").mouseenter(
            function(){
                $(".leftnav,.rightnav").show(300);
                clearInterval(timer);
            }
        );

        $(".lunbo").mouseleave(
            function(){
                $(".leftnav,.rightnav").hide(300);
                timer = setInterval(changePic,3000);
            }
        );

        $(".leftnav").click(
            function(){
                if(i<=1){
                    alert("已经是第一张");
                }else{
                    i--;
                    $(".lunbo img")
                        .attr("src","adver0"+i+".jpg");
                }

                changeImgNavBgColor();
            }
        );

        $(".rightnav").click(
            function(){
                if(i>=6){
                    alert("已经是最后一张");
                }else{
                    i++;
                    $(".lunbo img")
                        .attr("src","adver0"+i+".jpg");
                }

                changeImgNavBgColor();
            }
        );

        function changeImgNavBgColor(){
            $(".imgnav span").removeClass();
            $(".imgnav span:nth-of-type("+i+")")
                .addClass("imgnavhover");
        }

        timer = setInterval(changePic,3000);

        function changePic(){
            if(i==6){
                i=0;
            }
            $(".rightnav").click();
        }
    }
</script>










